<template>
	<view class="main">
		<view class="swiper">
			<u-swiper @change="e => currentNum = e.current" :list="list1" :height="320" :radius="0">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list1.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="goodsTitle">{{dataInfo.name}}</view>

		<view class="list">
			<view class="item">
				<span class="item-name">品类</span>
				<span class="item-calue">{{dataInfo.category}}</span>
			</view>
			<view class="item">
				<span class="item-name">重量</span>
				<span class="item-calue">{{dataInfo.weight}}kg</span>
			</view>
			<view class="item">
				<span class="item-name">单价</span>
				<span class="item-calue">{{dataInfo.unitPrice}}元/kg</span>
			</view>
			<view class="item">
				<span class="item-name">总价</span>
				<span class="item-calue">{{dataInfo.totalPrice}}元</span>
			</view>
		</view>

		<view class="btn">
			<view class="btn-row">
				<view class="btn-left">
					<span class="btn-left-name">总价：¥</span>
					<span class="btn-left-price">{{dataInfo.totalPrice}}</span>
				</view>
				<view class="btn-right" @click="toReport" v-if="$auth.hasPermi('app:RqOffer:add')">我的报价</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentNum: 0,
				goodsId:'',
				flag:'',
				posturl:'',
				dataInfo:{},
				list1: [],


			}
		},
		onLoad(options) {
			this.goodsId = options.id
			this.flag = options.flag //flag 1 采购、2 销售
			this.posturl = this.flag ==1?'/api/PurchaseInfo/info':'/api/RqSaleInfo/info'
			this.getInfo()
		},

		methods: {
			getInfo(){
				let that = this
				this.$postjson(this.posturl,{id:this.goodsId}).then(res=>{
					this.dataInfo = res.data.data
					let tem =  this.dataInfo.images?this.dataInfo.images.split(','):[]
					tem.forEach(v=>{
					 that.list1.push( that.baseUrl +v)
					})
				})
			},
			toReport() {
				let type = this.flag==1?'0':'1'
				uni.navigateTo({
					url: "/pages/index/goodsReport?id="+this.goodsId+'&type='+type+'&name='+this.dataInfo.name
				})
			}
		},


	}
</script>

<style lang="scss" scoped>
	.btn {
		box-shadow: 0upx -2upx 4upx 0upx rgba(0, 0, 0, 0.06);
		background: #FFFFFF;
		padding-bottom: 68upx;
		padding-top: 28upx;
		padding-left: 40upx;
		padding-right: 40upx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: calc(100% - 80upx);

		.btn-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.btn-left {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28upx;
			color: #111111;
		}

		.btn-left-price {
			font-family: Roboto, Roboto;
			font-weight: 500;
			font-size: 36upx;
			color: #111111;
		}

		.btn-right {
			width: 212upx;
			height: 80upx;
			background: linear-gradient(137deg, #11AA66 0%, #12C66B 100%);
			border-radius: 40upx;
			text-align: center;
			font-family: PingFangHK, PingFangHK;
			font-weight: 500;
			font-size: 32upx;
			color: #FFFFFF;
			line-height: 80upx;
		}

	}

	.main {
		padding-bottom: 200upx
	}

	.list {
		background: #FFFFFF;
		padding: 0 40upx;

		.item {
			width: 100%;
			border-bottom: solid 1upx #E4E4E4;
			display: flex;
			align-items: center;
			padding: 20upx 0;

		}

		.item:last-child {
			border-bottom: none;
		}

		.item-name {
			font-size: 28upx;
			color: #666;
			display: inline-block;
			width: 90upx;
		}

		.item-calue {
			font-size: 28upx;
			color: #000000;
			width: calc(100% - 90upx);
		}
	}

	page {
		background: #F9F9F9;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.goodsTitle {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32upx;
		color: #111111;
		padding: 30upx 40upx;
		background: #FFFFFF;
		border-radius: 0 0 8upx 8upx;
		margin-bottom: 20upx;
	}
</style>